<template>
    <div class="newList">
        <h1>周一周四，新品首发</h1>
        <ul>
            <li v-for="item in newGoodsList" :key="item.id">
                <img :src="item.list_pic_url" alt="" />
                <span>{{ item.name }}</span>
                <p>{{ item.retail_price | formatPrice }}</p>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    },
    props: ['newGoodsList'],
};
</script>

<style lang="less" scoped>
.newList {
    h1 {
        font-size: 18px;
        margin: 10px;
        text-align: center;
    }
    ul {
        font-size: 16px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li {
            width: 49%;
            position: relative;
            margin-bottom: 5px;
            span {
                display: block;
                margin: 0;
                text-align: center;
            }
            p {
                display: block;
                margin: 0;
                text-align: center;
                color: red;
            }
            img {
                width: 100%;
            }
        }
    }
}
</style>
